<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-content">
        <div class="logo">
          <span>游客服务平台</span>
        </div>
        <el-menu 
          mode="horizontal" 
          :router="true"
          class="nav-menu"
          :default-active="activeIndex">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/emergency">应急信息</el-menu-item>
          <el-submenu index="2">
            <template slot="title">旅游服务</template>
            <el-menu-item index="/hotels">酒店预订</el-menu-item>
            <el-menu-item index="/entertainment">餐饮娱乐</el-menu-item>
            <el-menu-item index="/routes">旅游路线</el-menu-item>
          </el-submenu>
          <el-menu-item index="/weather">天气路况</el-menu-item>
        </el-menu>
        <div class="user-area">
          <template v-if="!isLoggedIn">
            <el-button type="text" @click="$router.push('/login')">登录</el-button>
            <el-button type="primary" round @click="$router.push('/register')">注册</el-button>
          </template>
          <template v-else>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                欢迎，{{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <template v-if="userRole === 'admin'">
                  <el-dropdown-item command="emergency">应急信息管理</el-dropdown-item>
                  <el-dropdown-item command="hotel">酒店管理</el-dropdown-item>
                  <el-dropdown-item command="entertainment">餐饮娱乐管理</el-dropdown-item>
                </template>
                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </div>
      </div>
    </el-header>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 轮播图 -->
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="item in carouselItems" :key="item.id">
          <div class="carousel-content">
            <img :src="item.image" :alt="item.title" class="carousel-image">
            <div class="carousel-text">
              <h2>{{ item.title }}</h2>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

      <!-- 快速服务入口 -->
      <div class="quick-services">
        <el-row :gutter="20">
          <el-col :span="6" v-for="service in services" :key="service.id">
            <el-card 
              class="service-card" 
              shadow="hover"
              @click.native="handleServiceClick(service)">
              <div class="service-icon">
                <i :class="service.icon"></i>
              </div>
              <div class="service-info">
                <h3>{{ service.title }}</h3>
                <p>{{ service.description }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 最新资讯 -->
      <div class="news-section">
        <h2 class="section-title">最新资讯</h2>
        <el-row :gutter="20">
          <el-col :span="8" v-for="news in newsItems" :key="news.id">
            <el-card class="news-card" shadow="hover">
              <img :src="news.image" class="news-image">
              <div class="news-content">
                <h3>{{ news.title }}</h3>
                <p>{{ news.summary }}</p>
                <span class="news-date">{{ news.date }}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 页脚 -->
    <el-footer class="footer">
      <div class="footer-main">
        <div class="footer-section">
          <div class="section-title">游客服务平台</div>
          <div class="section-content">
            <p><i class="el-icon-phone"></i> 联系华迪</p>
            <p><i class="el-icon-message"></i> 华迪@牛逼.com</p>
          </div>
        </div>
        
        <div class="footer-section">
          <div class="section-title">开发团队</div>
          <div class="section-content">
            <p>组长：江雨峰</p>
            <p>组员：曾科元、廖江龙、张琰、果几木铁</p>
          </div>
        </div>
      </div>
      
      <div class="footer-copyright">
        <span>© 2024 游客服务平台</span>
        <span>华迪第六组</span>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      activeIndex: '/',
      isLoggedIn: false,
      username: '',
      userRole: '',
      carouselItems: [
        {
          id: 1,
          image: 'https://picsum.photos/1200/800?random=1',
          title: '探索美丽景点',
          description: '发现令人惊叹的自然与人文景观'
        },
        {
          id: 2,
          image: 'https://picsum.photos/1200/800?random=2',
          title: '精品旅游路线',
          description: '专业规划，享受完美旅程'
        },
        {
          id: 3,
          image: 'https://picsum.photos/1200/800?random=3',
          title: '特色文化体验',
          description: '感受独特的本土文化魅力'
        }
      ],
      services: [
        {
          id: 1,
          icon: 'el-icon-warning-outline',
          title: '应急信息',
          description: '及时获取旅游安全信息',
          route: '/emergency'
        },
        {
          id: 2,
          icon: 'el-icon-house',
          title: '酒店预订',
          description: '便捷的住宿预订服务',
          route: '/hotels'
        },
        {
          id: 3,
          icon: 'el-icon-food',
          title: '餐饮娱乐',
          description: '美食娱乐好去处',
          route: '/entertainment'
        },
        {
          id: 4,
          icon: 'el-icon-cloudy',
          title: '天气路况',
          description: '实时天气和路况信息',
          route: '/weather'
        }
      ],
      newsItems: [
        {
          id: 1,
          title: '2024年春季旅游攻略',
          summary: '最新的旅游景点推荐和注意事项',
          image: 'https://picsum.photos/400/300?random=4',
          date: '2024-03-18'
        },
        {
          id: 2,
          title: '特色文化游览路线',
          summary: '深度体验本地文化特色',
          image: 'https://picsum.photos/400/300?random=5',
          date: '2024-03-17'
        },
        {
          id: 3,
          title: '周边游好去处',
          summary: '周末短途游推荐景点',
          image: 'https://picsum.photos/400/300?random=6',
          date: '2024-03-16'
        }
      ]
    }
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case 'emergency':
          this.$router.push('/admin/emergency')
          break
        case 'hotel':
          this.$router.push('/admin/hotel')
          break
        case 'entertainment':
          this.$router.push('/admin/entertainment')
          break
        case 'profile':
          this.$router.push('/profile')
          break
        case 'logout':
          this.handleLogout()
          break
      }
    },
    handleLogout() {
      try {
        // 清除本地存储的用户信息
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        
        // 重置状态
        this.isLoggedIn = false
        this.username = ''
        
        // 提示用户
        this.$message.success('退出登录成功')
        
        // 跳转到登录页
        this.$router.push('/login')
      } catch (error) {
        console.error('Logout error:', error)
        this.$message.error('退出登录失败，请重试')
      }
    },
    // 检查登录状态
    checkLoginStatus() {
      const token = localStorage.getItem('token')
      const userStr = localStorage.getItem('user')
      if (token && userStr) {
        try {
          const user = JSON.parse(userStr)
          this.isLoggedIn = true
          this.username = user.username
          this.userRole = user.role
        } catch (error) {
          console.error('Parse user info error:', error)
          this.handleLogout()
        }
      }
    },
    handleServiceClick(service) {
      // 检查登录状态
      const token = localStorage.getItem('token');
      if (!token) {
        this.$message.warning('请先登录');
        this.$router.push('/login');
        return;
      }

      // 使用 catch 处理路由跳转错误
      this.$router.push(service.route).catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          console.error('Navigation error:', err);
        }
      });
    }
  },
  created() {
    // 组件创建时检查登录状态
    this.checkLoginStatus()
  },
  // 监听路由变化，更新登录状态
  watch: {
    '$route'() {
      this.checkLoginStatus()
    }
  }
}
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  padding: 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

.nav-menu {
  border-bottom: none;
}

.user-area {
  display: flex;
  align-items: center;
  gap: 20px;
}

.main-content {
  margin-top: 60px;
  flex: 1;
  padding: 20px;
}

.carousel-content {
  height: 100%;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.carousel-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: white;
  text-align: center;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.quick-services {
  max-width: 1200px;
  margin: 40px auto;
}

.service-card {
  cursor: pointer;
  transition: all 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.service-icon {
  font-size: 40px;
  color: #409EFF;
  margin-bottom: 20px;
}

.service-info h3 {
  margin: 10px 0;
  font-size: 18px;
  color: #303133;
}

.service-info p {
  color: #909399;
  font-size: 14px;
}

.news-section {
  max-width: 1200px;
  margin: 40px auto;
}

.section-title {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}

.news-card {
  margin-bottom: 20px;
}

.news-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.news-content {
  padding: 15px;
}

.news-content h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.news-content p {
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
}

.news-date {
  color: #909399;
  font-size: 12px;
}

.footer {
  background-color: #fff;
  padding: 0;
  border-top: 1px solid #eee;
}

.footer-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  justify-content: space-around;
}

.footer-section {
  text-align: left;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.section-content {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
}

.section-content p {
  margin: 8px 0;
}

.section-content i {
  margin-right: 8px;
  color: #409EFF;
}

.footer-copyright {
  text-align: center;
  padding: 15px 0;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 14px;
}

.footer-copyright span {
  margin: 0 10px;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .footer-main {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  
  .footer-section {
    margin-bottom: 20px;
    text-align: center;
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  display: flex;
  align-items: center;
}

.el-dropdown-menu {
  margin-top: 5px;
}

.el-dropdown-item.is-divided {
  border-top: 1px solid #ebeef5;
  margin-top: 6px;
  padding-top: 6px;
}
</style> 